<template>
  <div>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <video ref="video" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: []
    }
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getDisplayMedia();
      this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
      this.mediaRecorder.addEventListener('dataavailable', event => {
        this.recordedChunks.push(event.data);
      });
      this.mediaRecorder.start();

      // 播放流
      this.$refs.video["srcObject"] = stream;;


      this.$refs.video.play();

    },
    stopRecording() {
      this.mediaRecorder.stop();

      //先录制 后保存 保存后 转为url可以播放
      // this.mediaRecorder.stop();
      // const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
      // const url = URL.createObjectURL(blob);
      // this.$refs.video.src = url;


    }
  }
}
</script>
